import { useTitle } from 'ahooks'
import style from './index.less'
import React, { useEffect, useState } from 'react'
import SRC from '@/images/supply/address.png'
import Buy from '@/images/supply/buy.png'
import Wu from '@/images/supply/wu.png'
import Tu from '@/images/supply/invoice.png'
import { Ellipsis, Form, Input, List, Selector } from 'antd-mobile'
import Item from './.item'
import { useSearchParams } from 'umi'
import { CountDown } from '@/components/count-down'
import { getPurchaserOrder } from '@/services/Publish'

interface dataDto {
    purchaserEdit: boolean;
    id: string;
    commodityName: string;
    shopping: string;
    variety: string;
    expectedPrice: string;
    expectedAmount: string;
    totalMoney: string;
    imageUrl: string;
    originPlace: string;
    shipmentPlace: string;
    createTime: number;
    purchaserName: string;
    purchaserPhone: string;
    shippingAddress: string;
}

export default () => {
    useTitle('订单详情')
    const [status, setStatus] = useState()
    const [value, setValue] = useState('1')
    const [data, setData] = useState<dataDto>({} as dataDto);
    const [searchParams] = useSearchParams();

    const query = {
        id: String(searchParams.get('id'))
    }

    const getData = async () => {
        const res = await getPurchaserOrder(query.id)
        setData(res)
    }

    const options = [
        {
            label: '现金支付',
            value: '1',
        },
        {
            label: '微信支付',
            value: '2',
        },
        {
            label: '银行卡',
            value: '3',
        },
    ]
    useEffect(() => {
        getData()
    }, [])
    return (
        <div className={style.page}>
            {data.purchaserEdit ? null
                : (<div className={style.address}>
                    <div className={style['address-title']}>
                        <img src={SRC} alt='alt' />
                        收货信息
                    </div>
                    <div className={style['address-bottom']}>
                        <div>
                            <span className={style.write}>{data?.purchaserName}</span>
                            {data?.purchaserPhone}
                        </div>
                        <div>{data?.shippingAddress}</div>
                    </div>
                </div>)}

            <div className={style.po}>
                <div className={style['list-item']}>
                    <div className={style['con-tt']}>
                        <img src={Buy} alt='SRC' />
                        <span>四季化肥批发</span>
                        <span className={style.business}>企业客户</span>
                    </div>
                    <div className={style.con}>
                        <div className={style['con-left']}>
                            {data?.imageUrl ? (
                                <img src={data?.imageUrl} alt="商品图片" />
                            ) : <img src={Wu} alt='无' />}
                        </div>
                        <div className={style['con-right']}>
                            <div className={style.name}>
                                <Ellipsis direction='end' content={data?.commodityName} rows={2} />

                            </div>
                            <div className={style.name}>
                                <span className={style.type}>{data?.variety}</span>
                                <span className={style.red}>
                                    <img src={Tu} alt='src' className={style.src} />
                                    不支持在线开票
                                </span>
                            </div>
                        </div>
                    </div>
                    <div className={style['box-top']}>
                        <div className={style['box-list']}>
                            <span className={style.names}>买家出价</span>
                            <span className={style.red}>{data?.expectedPrice}元/斤</span>
                        </div>
                        <div className={style['box-list']}>
                            <span className={style.names}>数量</span>
                            <span>×{data?.expectedAmount}</span>
                        </div>
                        <div className={style['box-list']}>
                            <span className={style.names}>合计金额</span>
                            <span className={style.money}>￥{Number(data?.totalMoney).toFixed(2)}</span>
                        </div>
                    </div>
                    <div className={style['box-bottom']}>
                        <div className={style['box-list']}>
                            <span className={style.names}>产地</span>
                            <span>{data?.originPlace}</span>
                        </div>
                        <div className={style['box-list']}>
                            <span className={style.names}>发货地</span>
                            <span>{data?.shipmentPlace}</span>
                        </div>
                        <div className={style['box-list']}>
                            <span className={style.names}>订单创建时间</span>
                            <span className={style.money}>
                                <CountDown createTime={data?.createTime} />
                            </span>
                        </div>
                    </div>
                </div>

            </div>

            {data.purchaserEdit ? (
                <div className={style['list-a']}>
                    <Form
                        layout='horizontal'
                        mode='card'
                        initialValues={{ paymentMethod: '1' }}//默认支付方式选择第一项
                    >
                        <Form.Item label='买家出价' extra={'元/斤'}>
                            <Input placeholder='请输入' />
                        </Form.Item>
                        <Form.Item label='采购数量' extra={'斤'}>
                            <Input placeholder='请输入' />
                        </Form.Item>
                        <Form.Item label='合计金额' name='totalMoney' extra={'￥0.00'}>
                            <Input />
                        </Form.Item>
                        <Form.Item label='支付方式' name="paymentMethod">
                            <Selector
                                columns={3}
                                className={style.select}
                                showCheckMark={false}
                                options={options}
                                value={[value]}
                                onChange={v => {
                                    if (v.length) {
                                        setValue(v[0])
                                    }
                                }}
                            />
                        </Form.Item>
                    </Form>
                </div>
            )
                : <div className={style['list-a']}>
                    <List mode='card'>
                        <List.Item  
                        extra={
                                <div className={style.extraPart}>元/斤</div>
                            }
                            >
                                卖家出价
                                </List.Item>
                        <List.Item extra={'2.50' + '斤'}>供货数量</List.Item>
                        <List.Item extra={'￥' + '2.50'}>合计金额</List.Item>
                        <List.Item>
                            支付方式
                            <span className={style['list-span']}>银行卡</span>
                        </List.Item>
                    </List>
                </div>}
            <div className={style.bottom}>
                <Item
                    data={{
                        id: data.id,
                        negotiationState: '',
                        purchaserEdit: data.purchaserEdit,
                    }}
                    callback={function (): void {
                        throw new Error('Function not implemented.')
                    }} />
            </div>
        </div>
    )
}
